<template>
  <div class="todo-list-container">
    <h1>待办事项列表</h1>
    <div class="input-container">
      <input
        v-model="newTodoTitle"
        @keyup.enter="addTodo"
        placeholder="输入待办事项，按回车添加"
        class="todo-input"
      >
    </div>
    <div v-if="todos.length === 0" class="empty-tip">
      暂无待办事项
    </div>
    <div class="todo-items">
      <TodoItem
        v-for="(todo, index) in todos"
        :key="index"
        :title="todo.title"
        :completed="todo.completed"
        @update:completed="updateTodoStatus(index, $event)"
        @remove-todo="removeTodo(index)"
      />
    </div>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data() {
    return {
      newTodoTitle: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodoTitle.trim()) {
        this.todos.push({
          title: this.newTodoTitle.trim(),
          completed: false
        })
        this.newTodoTitle = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    updateTodoStatus(index, completed) {
      this.todos[index].completed = completed
    }
  }
}
</script>

<style scoped>
.todo-list-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

.todo-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.input-container {
  margin: 20px 0;
}

.empty-tip {
  text-align: center;
  color: #888;
  padding: 20px;
}
</style>